<template>
	<Row>
		<Row :gutter="16">
			<Col span="4">
				<Card style="overflow: hidden;">
					<span slot="title" class="center"> 全部类型
					</span>
					<Tree :data="baseData" ></Tree>
				</Card>
			</Col>
			<Col span="20">
			    <Card>
				<Tabs type="card">
				    <Tab-pane label="未审核">
				        <Table border :context="self" :columns="columns7" :data="data6"></Table>
				    </Tab-pane>
					<Tab-pane label="已审核">
					    <Table border :context="self" :columns="columns8" :data="data7"></Table>
					</Tab-pane>
				</Tabs>
				<Row class="page-distance">
					<Page :total="dataLength" :current="tabPage.firstPage" show-total show-sizer show-elevator @on-change="getCurrentPage" @on-page-size-change="getPageSize" ref="pageId"></Page>
				</Row>
				</Card>
			</Col>
		</Row>
	</Row>
</template>

<script>
	export default {
		data() {
			return {
				tabPage: {
					firstPage: 1,
					pagesize: 10,
				},
				dataLength: 0,
				baseData: [{
						expand: false,
						title: '日常工作',
						children: [{
								title: '公司通知',
								expand: false,
							},
							{
								title: '部门通知',
								expand: false,
							},
							{
								title: '月工作总结与计划',
								expand: false,
							},
							{
								title: '内部留言',
								expand: false,
							}
						]
					},
					{
						expand: false,
						title: '费用相关',
						children: [{
								title: '出差费用申请流程',
								expand: false,
							},
							{
								title: '个人借款流程',
								expand: false,
							},
							{
								title: '费用报销流程',
								expand: false,
							},
							{
								title: '业务招待申请',
								expand: false,
							},
							{
								title: '还款流程',
								expand: false,
							}
						]
					},
					{
						expand: false,
						title: '服务支持',
						children: [{
								title: '电子邮箱申请',
								expand: false,
							},
							{
								title: '机票申请',
								expand: false,
							},
							{
								title: '汽车火车票申请',
								expand: false,
							},
							{
								title: '宾馆预订',
								expand: false,
							},
							{
								title: '用车申请流程',
								expand: false,
							}
						]
					},
					{
						expand: false,
						title: '人事管理',
						children: [{
								title: '离职申请',
								expand: false,
							},
							{
								title: '转正申请',
								expand: false,
							},
							{
								title: '加班申请',
								expand: false,
							},
							{
								title: '入职申请',
								expand: false,
							},
							{
								title: '出差/外出流程',
								expand: false,
							},
							{
								title: '调岗申请',
								expand: false,
							},
							{
								title: '请假申请',
								expand: false,
							},
							{
								title: '人才推荐',
								expand: false,
							}
						]
					}
				],
				self: this,
				columns7: [{
						title: '事务类型',
						key: 'faffair',
						fixed: 'left',
						width: 150
					},
					{
						title: '标题',
						key: 'ftitle',
						width: 240
					},
					{
						title: '流程编号',
						key: 'fnumber',
						width: 200
					},
					{
						title: '当前节点',
						key: 'fnode',
						width: 200
					},
					{
						title: '创建人',
						key: 'fname',
						width: 200
					},
					{
						title: '未操作者',
						key: 'fadmin',
						width: 120
					},
					{
						title: '紧急程度',
						key: 'flevel',
						width: 120
					},
					{
						title: '发起时间',
						key: 'fdata',
						width: 200
					},
					{
						title: '操作',
						key: 'action',
						fixed: 'right',
						width: 150,
						align: 'center',
						render(row, column, index) {
							return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="primary" size="small" @click="show(${index})">审核</i-button>`;
						}
					}
				],
				columns8: [{
						title: '事务类型',
						key: 'faffair',
						fixed: 'left',
						width: 150
					},
					{
						title: '标题',
						key: 'ftitle',
						width: 240
					},
					{
						title: '流程编号',
						key: 'fnumber',
						width: 200
					},
					{
						title: '当前节点',
						key: 'fnode',
						width: 200
					},
					{
						title: '创建人',
						key: 'fname',
						width: 200
					},
					{
						title: '未操作者',
						key: 'fadmin',
						width: 120
					},
					{
						title: '紧急程度',
						key: 'flevel',
						width: 120
					},
					{
						title: '发起时间',
						key: 'fdata',
						width: 200
					},
					{
						title: '接收时间',
						key: 'fdataend',
						width: 200
					},
					{
						title: '消息回复',
						key: 'freply',
						width: 150
					},
					{
						title: '状态',
						key: 'fstate',
						fixed: 'right',
						width: 100,
						render(row, column, index) {
							const color = row.fstate == 1 ? 'green' :  'red' ;
							const text = row.fstate == 1 ? '已通过' : '被驳回' ;
							return `<tag type="border" color="${color}">${text}</tag>`;
						}
					},
					{
						title: '操作',
						key: 'action',
						fixed: 'right',
						width: 150,
						align: 'center',
						render(row, column, index) {
							return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button>`;
						}
					}
				],
				data6: [{
						faffair: '人事管理',
						ftitle: '张晓丽离职申请',
						fname: '张晓丽',
						fnumber: '00001',
						fnode: '申请上级审核',
						fadmin: '',
						flevel: '正常',
						fdata: '2017-05-18 09:00',
						freply: '',
					},
					{
						faffair: '人事管理',
						ftitle: '张晓丽离职申请',
						fname: '张晓丽',
						fnumber: '00001',
						fnode: '申请上级审核',
						fadmin: '',
						flevel: '正常',
						fdata: '2017-05-18 09:00',
						freply: '',
						fstate: 1,
					},
					{
						faffair: '人事管理',
						ftitle: '张晓丽离职申请',
						fname: '张晓丽',
						fnumber: '00001',
						fnode: '申请上级审核',
						fadmin: '',
						flevel: '正常',
						fdata: '2017-05-18 09:00',
						freply: '',
						fstate: 1,
					},
					{
						faffair: '人事管理',
						ftitle: '张晓丽离职申请',
						fname: '张晓丽',
						fnumber: '00001',
						fnode: '申请上级审核',
						fadmin: '',
						flevel: '正常',
						fdata: '2017-05-18 09:00',
						freply: '',
						fstate: 1,
					}
				],
				data7:[{
						faffair: '人事管理',
						ftitle: '张晓丽离职申请',
						fname:'张晓丽',
						fnumber: '00001',
						fnode: '申请上级审核',
						fadmin: '',
						flevel: '正常',
						fdata: '2017-05-18 09:00',
						fdataend: '2017-05-18 09:00',
						freply: '',
						fstate:1,
					},{
							faffair: '人事管理',
							ftitle: '张晓丽离职申请',
							fname:'张晓丽',
							fnumber: '00001',
							fnode: '申请上级审核',
							fadmin: '',
							flevel: '正常',
							fdata: '2017-05-18 09:00',
							fdataend: '2017-05-18 09:00',
							freply: '',
							fstate:1,
						},{
								faffair: '人事管理',
								ftitle: '张晓丽离职申请',
								fname:'张晓丽',
								fnumber: '00001',
								fnode: '申请上级审核',
								fadmin: '',
								flevel: '正常',
								fdata: '2017-05-18 09:00',
								fdataend: '2017-05-18 09:00',
								freply: '',
								fstate:1,
							},{
									faffair: '人事管理',
									ftitle: '张晓丽离职申请',
									fname:'张晓丽',
									fnumber: '00001',
									fnode: '申请上级审核',
									fadmin: '',
									flevel: '正常',
									fdata: '2017-05-18 09:00',
									fdataend: '2017-05-18 09:00',
									freply: '',
									fstate:1,
								}
				]
			}
		},
		methods: {
			show(index) {
				this.$Modal.info({
					title: '用户信息',
					content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
				})
			},
			// 分页
			getCurrentPage(val) {
				this.currentpage = val
				this.getDriverData()
			},
			getPageSize(val) {
				this.pagesize = val
				this.getDriverData()
			},
		}
	}
</script>

<style>

</style>
